<template>
    <div class="container">

        <div style="margin: 10px;" v-if="props.record.from == loginUserStore.getUserName()" :style="props.record.from == loginUserStore.getUserName() ? {marginLeft:'auto'}:{marginRight:'auto'}">
        {{ typeof props.record.date == 'string' ? props.record.date :(props.record.date?.getHours() as number - 12) + ":" + props.record.date?.getMinutes() }}
        </div>
        <div class="message" :style="!(props.record.from == loginUserStore.getUserName() )? {backgroundColor:'white'}:{}"  >
            <!-- {{  props.record.content  }} -->
            <div style="word-wrap:break-word;" @click="checkImg" v-html="props.record.content"></div>
        </div>
        
        <!-- <div>a</div> -->
        <div style="margin: 10px;" v-if=" ! (props.record.from == loginUserStore.getUserName())" :style="props.record.from == loginUserStore.getUserName() ? {marginLeft:'auto'}:{marginRight:'auto'}">
        {{ typeof props.record.date == 'string' ? props.record.date :(props.record.date?.getHours() as number - 12) + ":" + props.record.date?.getMinutes() }}
        </div>
        <!-- props.record.date?.getFullYear + "-" + props.record.date?.getMonth + '-' + props.record.date?.getDay + ' ' + props.record.date?.getHours + ':' + props.record.date?.getMinutes()  -->
    </div>

</template>
<script setup lang="ts">
import type { ChatRecord } from '@/types';
import { useLoginUserStore } from '@/stores/loginUser';
import { ref } from 'vue';
import bus from '@/bus'
const loginUserStore = useLoginUserStore()


const props = defineProps<{
    record:ChatRecord
}>()
const checkImg = (e:PointerEvent ) => {
    const target = e.target as HTMLImageElement
    if(target.nodeName.toLocaleLowerCase() == 'img') {
        console.log('img!');
        bus.emit('imageCheck',target.src)
    }
    
    
}
</script>
<style scoped>
.container { 
    display: flex;
    /* flex-direction: row; */
    margin-bottom: 30px;
    margin: 10px;
}
.message{
    padding: 10px;
    max-width: 300px;
    min-height: 30px;
    line-height: 30px;
    border-radius: 10px;
    background-color: rgb(111, 229, 111);
}
img{
    width: 300px;
}
</style>